<template>
  <v-container id="dashboard" fluid tag="section">
    <v-row class="v-width-100">
      <v-col cols="12">
        <base-material-card icon="mdi-earth" title="全国各城市销售情况">
          <v-row>
            <v-col cols="12" class="mt-4">
              <v-simple-table class="ml-2">
                <thead>
                  <tr>
                    <th class="text-h4 font-weight-medium">排名</th>
                    <th class="text-h4 font-weight-medium">城市</th>
                    <th class="text-h4 font-weight-medium">销售量</th>
                    <th class="text-h4 font-weight-medium">销售占比</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(sale, i) in sales" :key="i">
                    <td>
                      <v-chip color="primary" dark class="pl-5 pr-5">
                        {{ sale.rank }}
                      </v-chip>
                    </td>
                    <td v-text="sale.country" />
                    <td v-text="sale.salesInM" />
                    <td
                      v-text="
                        ((sale.salesInM / totalSales) * 100).toFixed(2) + '%'
                      "
                    />
                  </tr>
                </tbody>
              </v-simple-table>
            </v-col>
          </v-row>
        </base-material-card>
      </v-col>

      <v-col cols="12" lg="4">
        <base-material-eCharts-card
          :options="emailsSubscriptionChart.options"
          color="primary"
          hover-reveal
          type="Bar"
        >
          <template v-slot:reveal-actions>
            <v-tooltip bottom>
              <template v-slot:activator="{ attrs, on }">
                <v-btn v-bind="attrs" color="info" icon v-on="on">
                  <v-icon color="info"> mdi-refresh </v-icon>
                </v-btn>
              </template>

              <span>刷新</span>
            </v-tooltip>

            <v-tooltip bottom>
              <template v-slot:activator="{ attrs, on }">
                <v-btn v-bind="attrs" light icon v-on="on">
                  <v-icon>mdi-pencil</v-icon>
                </v-btn>
              </template>

              <span>变更日期</span>
            </v-tooltip>
          </template>

          <h4 class="card-title font-weight-light mt-2 ml-2">网站浏览量</h4>

          <p class="d-inline-flex font-weight-light ml-2 mt-1">
            上一季度浏览情况
          </p>

          <template v-slot:actions>
            <v-icon class="mr-1" small> mdi-clock-outline </v-icon>
            <span class="caption grey--text font-weight-light"
              >更新10分钟前</span
            >
          </template>
        </base-material-eCharts-card>
      </v-col>

      <v-col cols="12" lg="4">
        <base-material-eCharts-card
          :options="dailySalesChart.options"
          color="success"
          hover-reveal
          type="Line"
        >
          <template v-slot:reveal-actions>
            <v-tooltip bottom>
              <template v-slot:activator="{ attrs, on }">
                <v-btn v-bind="attrs" color="info" icon v-on="on">
                  <v-icon color="info"> mdi-refresh </v-icon>
                </v-btn>
              </template>

              <span>刷新</span>
            </v-tooltip>

            <v-tooltip bottom>
              <template v-slot:activator="{ attrs, on }">
                <v-btn v-bind="attrs" light icon v-on="on">
                  <v-icon>mdi-pencil</v-icon>
                </v-btn>
              </template>

              <span>变更日期</span>
            </v-tooltip>
          </template>

          <h4 class="card-title font-weight-light mt-2 ml-2">日营业额</h4>

          <p class="d-inline-flex font-weight-light ml-2 mt-1">
            <v-icon color="green" small> mdi-arrow-up </v-icon>
            <span class="green--text">55%</span>&nbsp; 增加了今天的销售额
          </p>

          <template v-slot:actions>
            <v-icon class="mr-1" small> mdi-clock-outline </v-icon>
            <span class="caption grey--text font-weight-light"
              >更新4分钟前</span
            >
          </template>
        </base-material-eCharts-card>
      </v-col>

      <v-col cols="12" lg="4">
        <base-material-eCharts-card
          :options="dataCompletedTasksChart.options"
          color="info"
          hover-reveal
          type="Line"
        >
          <template v-slot:reveal-actions>
            <v-tooltip bottom>
              <template v-slot:activator="{ attrs, on }">
                <v-btn v-bind="attrs" color="info" icon v-on="on">
                  <v-icon color="info"> mdi-refresh </v-icon>
                </v-btn>
              </template>

              <span>刷新</span>
            </v-tooltip>

            <v-tooltip bottom>
              <template v-slot:activator="{ attrs, on }">
                <v-btn v-bind="attrs" light icon v-on="on">
                  <v-icon>mdi-pencil</v-icon>
                </v-btn>
              </template>

              <span>变更日期</span>
            </v-tooltip>
          </template>

          <h3 class="card-title font-weight-light mt-2 ml-2">已完成的工程</h3>

          <p class="d-inline-flex font-weight-light ml-2 mt-1">
            最后一次活动表现
          </p>

          <template v-slot:actions>
            <v-icon class="mr-1" small> mdi-clock-outline </v-icon>
            <span class="caption grey--text font-weight-light"
              >更新26分钟前</span
            >
          </template>
        </base-material-eCharts-card>
      </v-col>

      <v-col cols="12" sm="6" lg="3">
        <base-material-stats-card
          color="info"
          icon="mdi-twitter"
          title="关注人数"
          value="+245"
          sub-icon="mdi-clock"
          sub-text="刚刚更新"
        />
      </v-col>

      <v-col cols="12" sm="6" lg="3">
        <base-material-stats-card
          color="primary"
          icon="mdi-poll"
          title="网站访问人数"
          value="75521"
          sub-icon="mdi-tag"
          sub-text="跟踪分析"
        />
      </v-col>

      <v-col cols="12" sm="6" lg="3">
        <base-material-stats-card
          color="success"
          icon="mdi-store"
          title="收益"
          value="￥ 34,245"
          sub-icon="mdi-calendar"
          sub-text="24小时之前"
        />
      </v-col>

      <v-col cols="12" sm="6" lg="3">
        <base-material-stats-card
          color="orange"
          icon="mdi-sofa"
          title="注册人数"
          value="184"
          sub-icon="mdi-alert"
          sub-icon-color="red"
          sub-text="获取更多..."
        />
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "DashboardIndex",

  data() {
    return {
      dailySalesChart: {
        options: {
          grid: {
            top: 10,
            right: 30,
            bottom: 120,
            left: 40,
          },
          tooltip: {},
          xAxis: {
            axisLine: {
              lineStyle: {
                color: "#d7d7d7",
              },
            },
            axisTick: {
              //不显示坐标轴刻度线
              show: false,
            },
            data: ["M", "T", "W", "T", "F", "S", "S"],
          },
          yAxis: {
            splitLine: {
              lineStyle: {
                type: [5, 5],
                dashOffset: 5,
              },
            },
          },
          series: [
            {
              name: "营业额",
              type: "line",
              itemStyle: {
                color: "#d7d7d7",
              },
              barWidth: 12,
              data: [12, 17, 7, 17, 23, 18, 38],
            },
          ],
          textStyle: {
            color: "#d7d7d7",
          },
        },
      },
      dataCompletedTasksChart: {
        options: {
          grid: {
            top: 10,
            right: 30,
            bottom: 120,
            left: 40,
          },
          tooltip: {},
          xAxis: {
            axisLine: {
              lineStyle: {
                color: "#d7d7d7",
              },
            },
            axisLabel: {
              interval: 0,
              rotate: 40,
            },
            axisTick: {
              //不显示坐标轴刻度线
              show: false,
            },
            data: ["12am", "3pm", "6pm", "9pm", "12pm", "3am", "6am", "9am"],
          },
          yAxis: {
            splitLine: {
              lineStyle: {
                type: [5, 5],
                dashOffset: 5,
              },
            },
          },
          series: [
            {
              name: "工程量",
              type: "line",
              itemStyle: {
                color: "#d7d7d7",
              },
              barWidth: 12,
              data: [230, 750, 450, 300, 280, 240, 200, 190],
            },
          ],
          textStyle: {
            color: "#d7d7d7",
          },
        },
      },
      emailsSubscriptionChart: {
        options: {
          grid: {
            top: 10,
            right: 30,
            bottom: 120,
            left: 40,
          },
          tooltip: {},
          xAxis: {
            axisLine: {
              lineStyle: {
                color: "#d7d7d7",
              },
            },
            axisLabel: {
              interval: 0,
              rotate: 40,
            },
            axisTick: {
              //不显示坐标轴刻度线
              show: false,
            },
            data: ["北京", "上海", "广州", "深圳", "成都", "武汉"],
          },
          yAxis: {
            splitLine: {
              lineStyle: {
                type: [5, 5],
                dashOffset: 5,
              },
            },
          },
          series: [
            {
              name: "浏览量",
              type: "bar",
              itemStyle: {
                color: "#d7d7d7",
              },
              barWidth: 12,
              data: [542, 443, 320, 780, 553, 453],
            },
          ],
          textStyle: {
            color: "#d7d7d7",
          },
        },
      },
      sales: [
        {
          country: "北京",
          rank: 1,
          salesInM: 2920,
        },
        {
          country: "上海",
          rank: 2,
          salesInM: 1300,
        },
        {
          country: "广州",
          rank: 3,
          salesInM: 760,
        },
        {
          country: "深圳",
          rank: 4,
          salesInM: 690,
        },
        {
          country: "成都",
          rank: 5,
          salesInM: 600,
        },
        {
          country: "武汉",
          rank: 6,
          salesInM: 550,
        },
      ],
    };
  },
  computed: {
    totalSales() {
      return this.sales.reduce((acc, val) => acc + val.salesInM, 0);
    },
  },
};
</script>
